<template>
<view>
  <!-- 导航栏组件 -->
  <page-nav-bar></page-nav-bar>

  <!-- 置顶底图 -->
  <view class="background-image"></view>
  <view class="scan-back">
		<image class="scan-back-image" src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/quality/qualityDetailBanner.png" mode="widthFix"></image>
	</view>
  <view class="quality-detail-container">


    <!-- 镜片信息区域 -->
    <view class="lens-info-section">
      <view class="info-content">
        <view class="info-item">
          <text class="info-label">位置:</text>
          <text class="info-value">{{ orderData.eye || '暂无信息' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">状态:</text>
          <text class="info-value status-unactive" :style=" { color: orderData.activeColor }">{{ orderData.isActive || '暂无信息' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订单日期:</text>
          <text class="info-value">{{ orderData.date || '暂无信息' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订购门店:</text>
          <text class="info-value">{{ orderData.shopName || '暂无信息' }}</text>
        </view>
      </view>
    </view>

    <!-- 镜片参数区域 -->
    <view class="lens-params-section">
      <view class="section-title">镜片参数</view>
      <view class="params-content">
        <view class="params-content2">
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右直径 R:</text>
              <text class="param-value">{{ lensParams.c_diar || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左直径 R:</text>
              <text class="param-value">{{ lensParams.c_dial || '0' }}</text>
            </view>
          </view>
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右球镜:</text>
              <text class="param-value">{{ lensParams.c_rball || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左球镜:</text>
              <text class="param-value">{{ lensParams.c_lball || '0' }}</text>
            </view>
          </view>
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右柱镜:</text>
              <text class="param-value">{{ lensParams.c_rpole || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左柱镜:</text>
              <text class="param-value">{{ lensParams.c_lpole || '0' }}</text>
            </view>
          </view>
          
          <!-- 条件显示的参数 -->
          <block v-if="showAddFields">
            <view class="params-row">
              <view v-if="isLeft" class="param-item">
                <text class="param-label">右后表面离焦量:</text>
                <text class="param-value">{{ lensParams.c_radd || '0' }}</text>
              </view>
              <view v-else class="param-item">
                <text class="param-label">左后表面离焦量:</text>
                <text class="param-value">{{ lensParams.c_ladd || '0' }}</text>
              </view>
            </view>
          </block>
          
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右散光轴向:</text>
              <text class="param-value">{{ lensParams.c_rline || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左散光轴向:</text>
              <text class="param-value">{{ lensParams.c_lline || '0' }}</text>
            </view>
          </view>
          
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右瞳距:</text>
              <text class="param-value">{{ lensParams.pd_r || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左瞳距:</text>
              <text class="param-value">{{ lensParams.pd_l || '0' }}</text>
            </view>
          </view>
          
          <view class="params-row">
            <view v-if="isLeft" class="param-item">
              <text class="param-label">右瞳高:</text>
              <text class="param-value">{{ lensParams.ph_r || '0' }}</text>
            </view>
            <view v-else class="param-item">
              <text class="param-label">左瞳高:</text>
              <text class="param-value">{{ lensParams.ph_l || '0' }}</text>
            </view>
          </view>
          
          <view class="params-row">
            <view class="param-item">
              <text class="param-label">加工:</text>
              <text class="param-value">{{ lensParams.c_process_type_name || '暂无信息' }}</text>
            </view>
          </view>
          <view class="params-row">
            <view class="param-item">
              <text class="param-label">镀膜:</text>
              <text class="param-value">{{ lensParams.c_coating_type_name || '暂无信息' }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="cancel-btn" @tap="cancelAction">不是我的镜片？</view>
      <view class="bottom-buttons">
        <button class="confirm-btn" @tap="confirmAction">确认</button>
      </view>
    </view>
  </view>
</view>
</template>

<script>
  import pageNavBar from '../component/pageNavBar.vue';
  export default {
    components: {
    pageNavBar
  },
    data() {
      return {
        orderData: null, // 订单数据
        qrCodeContent: '', // 二维码内容
        lensParams: {}, // 镜片参数
        isLeft: true,
        showAddFields: true // 是否显示额外字段
      }
    },
    onLoad(options) {
      console.log('qrCodeContent onLoad', options.qrCodeContent)
      // 接收从 scanQuality.vue 传递过来的参数
      if (options && options.qrCodeContent) {
        this.qrCodeContent = options.qrCodeContent
        // 这里可以根据二维码内容请求详细的订单信息
        this.getQualityDetail()
      } else {
        // 如果没有接收到参数，使用模拟数据
        this.orderData = {
          orderDate: '暂无信息',
          shopName: '暂无信息',
          lensPosition: '暂无信息',
          status: '暂无信息'
        }
      }
    },
    methods: {
      // 获取镜片详情信息
      getQualityDetail() {
        const that = this
        console.log('qrCodeContent', that.qrCodeContent)
        that.$http.POST('/app/order/order/getOrderById', {
          scanUrl: that.qrCodeContent
        }, (res) => {
          if (res.code === 1000) {
            that.orderData = res.data
            that.lensParams = res.data
            
            if (that.orderData && that.orderData.eye === '左眼镜片') {
              that.isLeft = false
              uni.setStorageSync('scanLeft', that.qrCodeContent);
            }
            
            if (that.orderData && that.orderData.eye === '右眼镜片') {
              that.isLeft = true
              uni.setStorageSync('scanRight', that.qrCodeContent);
            }
            console.log('isLeft', that.orderData.eye, that.isLeft)
            // 根据业务需求决定是否显示额外字段
            that.showAddFields = true
          } else {
            uni.showToast({
              title: res.message,
              icon: 'none'
            });
          }
        })
      },
      
      // 确认按钮点击事件
      confirmAction() {
        const that = this
        uni.showToast({
          title: '确认成功',
          icon: 'success'
        })
        
        if (this.orderData && this.orderData.eye === '左眼镜片') {
          that.isLeft = false
          uni.setStorageSync('scanLeft', that.qrCodeContent);
        }
        
        if (this.orderData && this.orderData.eye === '右眼镜片') {
          that.isLeft = true
          uni.setStorageSync('scanRight', that.qrCodeContent);
        }
        console.log('isLeft', this.orderData.eye, that.isLeft)
        that.$tools.routerTo('/pages/quality/scanQuality', 'navigateTo', 'none')
      },
      
      // 取消按钮点击事件
      cancelAction() {
        uni.showModal({
          title: '确认',
          content: '确认不是您的镜片吗？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack()
            }
          }
        })
      }
    }
  }
</script>

<style>
.scan-back {
	position: absolute;
	top: 33vw;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -1; /* 置于底层 */
  padding: 0vw 2vw;
}
.scan-back-image {
	width: 100%;
}
/* 置顶底图样式 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/index_back.png');
  background-size: cover;
  background-position: center;
  z-index: -2; /* 置于底层 */
}
  .quality-detail-container {
    padding: 0;
    box-sizing: border-box;
    /* min-height: 100vh; */
    /* background: linear-gradient(to bottom, #e6f7ff, #f0f9ff); */
    position: relative;
  }
  
  /* 品牌头部 */
  .brand-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #2ac8a6;
  }
  
  .brand-logo {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
  }
  
  .brand-title {
    flex: 1;
    margin-left: 20rpx;
  }
  
  .brand-name {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    display: block;
  }
  
  .brand-slogan {
    color: #fff;
    font-size: 24rpx;
    opacity: 0.9;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
  }
  
  .dots {
    width: 6rpx;
    height: 6rpx;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 20rpx;
    position: relative;
  }
  
  .dots::before,
  .dots::after {
    content: '';
    position: absolute;
    width: 6rpx;
    height: 6rpx;
    background-color: #fff;
    border-radius: 50%;
    left: 0;
  }
  
  .dots::before {
    top: -12rpx;
  }
  
  .dots::after {
    bottom: -12rpx;
  }
  
  /* 验证结果 */
  .verify-result {
    text-align: center;
    padding: 30rpx 0;
    background-color: #fff;
    margin: 300rpx 20rpx 20rpx 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }
  
  .verify-text {
    color: #333;
    font-size: 32rpx;
  }
  
  .verify-tag {
    color: #089790;
    font-size: 32rpx;
    font-weight: bold;
  }
  
  /* 镜片信息区域 */
  .lens-info-section {
    margin: 90.5vw 4vw 0vw 4vw;
    overflow: hidden;
  }
  .lens-params-section {
    margin: 10vw 0vw 0vw 0vw;
    padding: 2vw;
    overflow: hidden;
    background-color: #089790;
  }
  
  .section-title {
    text-align: center;
    padding: 2vw;
    color: #fff;
    font-size: 6vw;
    font-weight: bold;
  }
  
  .info-content {
    padding: 0vw 5vw;
  }

  .params-content {
    padding: 4vw;
    background-color: #007670;
    border-radius: 3vw;
  }

  .params-content2 {
    padding: 3vw 5vw;
    border-radius: 3vw;
    background-color: #089790;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5vw;
  }
  
  .info-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .info-label {
    color: #089790;
    font-size: 28rpx;
    width: 180rpx;
  }

  .param-label {
    color: #fff;
    font-size: 28rpx;
    width: 300rpx;
  }
  
  .info-value {
    color: #007670;
    font-size: 28rpx;
    flex: 1;
    text-align: right;
  }

  .param-value {
    color: #00E3D8;
    font-size: 28rpx;
    flex: 1;
    text-align: right;
  }
  
  .status-unactive {
    color: #ff6b6b;
  }
  
  /* 镜片参数区域 */
  .params-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25rpx;
  }
  
  .params-row:last-child {
    margin-bottom: 0;
  }
  
  .param-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0vw 2vw 1vw 2vw;
    border-bottom: 1rpx solid #D8D8D8;
  }
  
  /* 底部按钮 */
  .bottom-buttons {
    align-items: center;
  }
  
  .confirm-btn {
    background-color: #004642;
    color: #fff;
    font-size: 32rpx;
    border-radius: 25rpx;
    padding: 2vw 10vw;
    margin-bottom: 5vw;
  }
  
  .cancel-btn {
    margin: 2vw 0vw 2vw 0vw;
    color: #22C7BF;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 底部品牌信息 */
  .footer-brand {
    text-align: center;
    padding: 30rpx 0;
    margin-top: 40rpx;
  }
  
  .footer-text {
    color: #999;
    font-size: 24rpx;
  }
</style>
